<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_组件模板抽离写法</title>
</head>
<!-- 
组件模板抽离: 前几章我们将 html 结构都写到 vue 代码里面了,会发现写起来很麻烦而且不宜维护结构也不清晰,于是有了模板抽离
-->

<body>
    <div id="app">
        <test-template></test-template>
    </div>
</body>

<script src="../vue.js"></script>

<!-- 1. 使用 template 标签来进行组件分离 -->
<template id="tmp">
	<div>
		<h2>template标签分离html模板</h2>
	</div>
</template>

<script>
    // 2. 注册上面分离好的组件
    Vue.component('test-template', {
        template: '#tmp'
    })
    const vm = new Vue({
        el: '#app'
    })
</script>

</html>